<template>
  <!-- #ifdef H5 -->
  <mtitles  title="我要点单" bgColor="#56BF7A" :delta='3' color="#fff" isBack></mtitles>
  <!-- #endif -->
  <view class="container-con">
    <view class="modz" @click="modzShow" :class="{act:imgliINdex!==-1}" @touchmove.stop.prevent="stopPrevent"></view>
    <technicianView ref="technician" @confirm="technicianConfirm" :technicianEvent="technicianEvent"
      @getEvent="getEvent">
    </technicianView>
    <view class="p_rlt" style="z-index:3">
      <view class="map-box" :class="{height:!noScrBot||isMoving}" @click.stop="closeAll" >
        <!-- <view class="map-box" :class="{height:flag}" @click="closeAll"> -->
        <view class="bgShadou" @touchmove.stop.prevent="stopPrevent" :class="{active:flag}"></view>
        <map class="bgMap" :longitude="state.mapLongitude" :latitude="state.mapLatitude" show-location="true"
          :scale="state.scale" :markers="state.covers" @markertap="markertap">
          <!-- #ifdef MP-WEIXIN -->
          <cover-view slot="callout">
            <cover-view class="" style="position: relative;">
              <cover-view v-for="(item,index) in state.covers" :key="index"
                class="customCallout flex flex-direction justify-center" :marker-id="item.id">
                <cover-view class="callNames d_ib text-c3 text-bold text-df">{{item.contName}}</cover-view>
                <cover-view class="callNames d_ib text-c6 text-xs margin-top-xs">{{item.text}}</cover-view>
                <cover-image class="coverImgs"></cover-image>
              </cover-view>
            </cover-view>
          </cover-view>
          <!-- #endif -->
        </map>
      </view>
      <view class="top-box  justify-between flex align-center padding-left padding-right" v-if="!flag">
        <view class=" flex justify-between align-center top-chikdw "
          @click.stop="mnavTo('/pages/others/positionStores/positionStores?source=createOrder')">
          <view class="msyuan flex justify-center align-center"><text class="acon-mendian1"></text></view>
          <text class="text-style">颐而康星沙店</text>
          <text class="lg text-gray cuIcon-roundright"></text>
        </view>
        <view class="call-phone flex align-center justify-center" @click="callPhone('15012916147')">
          <text class="acon-dianhua phonIco"></text>
        </view>
        <view class="lower-w" @click.stop="consultMap">
          查看地图
          <text class="lg text-gray cuIcon-right"></text>
        </view>
      </view>
    </view>
   
    <slideContent :initTop="initTopH" :disable="allowSlide" :minTop="minTopH" :maxTop="maxTopH" @change="changeSlide" @moving="slideAct"
      zIndex="10" ref="sildContRef" class="p_rlt">
      <template v-slot:contents>
        <view class="slideBg" :style="{height:'calc(100% - 240rpx)'}"></view>
        <view class="middle-con">
          <view class="zsm-box margin-left">
            <!-- 选择技师 -->
            <view class="modz-min" @click="modzShow" :class="{act:openKey}"></view>
            <view class="above-box" :style="{opacity:slideTopOp,marginTop:slideMarg+'rpx'}">
              <!-- <uni-transition :show="!flag" :duration="400" style="z-index: 2; position: relative;" mode-class="fade"> -->
              <view class="above">
                <view class="tabsref-con padding-bottom-sm">
                  <tabs ref="tabsRef" :scroll="false" :list="tablist" @tabItemClick="tabSelect" marright="170rpx"
                    activeWeight='700' :current="currentIndex" fontSize="32rpx" barMargin="10" activeColor="#FFF"
                    barWidth="40" activeBarColor="#FFF" unActi="#FFF"></tabs>
                </view>
                <view class="center-con">
                  <!-- 没有熟悉的技师 -->
                  <block v-if="currentIndex == 0">
                    <view>
                      <scroll-view class="scroll-view padding-left-sm padding-right-sm" scroll-x
                        :scroll-with-animation="true" :scroll-left="scrollLeft" @scroll="subscrActImg"
                        @touchend="handleTouchEnd">
                        <view class="flex justify-between padding-top-sm padding-bottom-sm">
                          <view class="img-li flex flex-direction justify-center align-center"
                            @click.stop="selceImgli(item,index,$event)" v-for="(item,index) in jishuData" :key="index"
                            :class="'imgItem' + index">
                            <view class="imgstyle">
                              <image class="img" :class="{imgliactive:imgliINdex == index}" :src="item.img" mode="">
                              </image>

                              <!-- <view class="img-triangle" v-if="item.selce"></view> -->
                            </view>
                            <text class="textstyle margin-top-xs">{{item.name}}</text>
                            <view v-if="index == 1" class="mtips text-xs text-center text-white">推荐</view>
                          </view>
                        </view>
                      </scroll-view>
                      <!-- <technicianView ref="technician" @confirm="technicianConfirm"
												@getEvent="getEvent">
											</technicianView> -->
                      <!-- <view class="text-right padding-left-sm padding-right-sm padding-bottom-sm">
                        我是新手,不会选项目,点这里 <text class="lg text-gray cuIcon-roundright"></text>
                      </view> -->
                    </view>
                  </block>
                  <block v-else>
                    <view class="pad_b48 dianBox p_rlt">
                      <!-- @tap="focusSearch" -->
                      <view class="padding-sm">
                        <view class="cu-bar search bg-white flex flex-direction"  >
                          <view class="search-form round padding-left" @click="expand" >
                            <!-- :focus="turnSearch" @blur="seachTech('blur')" confirm-type="search"-->
                            <input class="seinput" placeholder-style="font-size:28rpx;color:#999" v-model="phoneValue"
                              disabled type="number" maxlength="11" placeholder="请输入您要点名或指定的的技师编号" />
                            <text class="cuIcon-search seachIco text-ngreen phico"></text>
                            <!-- <text class="cuIcon-search seachIco" @click.stop="rSeachValue?seachTech('icon'):openKey=!openKey"></text> -->
                          </view>
                        </view>
                        <view class="padding-top jxtj flex justify-center" @click.stop="openKey=true">
                          + 继续添加
                        </view>
                      </view>

                      <view class="numkeyBox margin-top-sm" :class="{'show':openKey}" @click.stop="stopPrevent">
                        <numberKeyboard ref='KeyboarHid' :keyValue="phoneValue" @back="keyBack" clearBtn showConfirm
                          @finish="onfinish" @inputings='onInput' :psdLength='11'></numberKeyboard>
                      </view>
                    </view>
                  </block>

                </view>
              </view>
            </view>

            <view class="top-menu flex justify-end  margin-top" v-show="slideBot>0"
              :style="{opacity:slideBot}">
              <!-- <view class="left-con flex justify-between padding-right-xs padding-left-xs align-center"
					      @click.stop="showPop('arrangeRef')">
					      <view>
					        <text class="wdd acon-Vector2"></text>
					      </view>
					      <view class="flex flex-direction">
					        <text class="text-c3 text-lg text-bold">我点的</text>
					        <view class="flex ">
					          <text class="text-df color9700">3人</text>
					          <view><text class="text-sm text-c9">修改</text><text class="cuIcon-right text-c9"></text></view>
					        </view>
					      </view>
					    </view> -->
              <view
                class="right-con bg-white flex align-end flex-direction justify-center  padding-left-sm padding-right-sm padding-top-xs padding-bottom-xs"
                @click.stop="mnavTo('/pages/others/positionStores/positionStores?source=createOrder')">
                <view class="text-c3 text-lg text-bold">{{storeName}}</view>
                <view><text class="text-sm text-c9">修改</text><text class="cuIcon-right text-c9"></text></view>
              </view>
            </view>
            <!-- 预约服务时间 -->
            <view class="bg-white margin-top-sm  bg-shadou maiTopNegative">
              <view class="flex fwsjtitle justify-between align-center padding-left-sm padding-right-sm " :class="{active:flag}">
                <view class="yytime flex flex-direction">
                  <text class="fwshij" :class="{active:flag}">{{ flag ? '请选择预约服务时间' : '预约服务时间'}}</text>
                </view>
                <view class="yymiao flex justify-center align-center" v-if="remainingTime">
                  {{ remainingTime }}s
                </view>
              </view>
              <view class="   padding-top-xs  padding-sm padding-t0">
                <view class="dibu-con bg-shadou">

                  <view class="title-con padding-left-sm padding-right-sm flex">
                    <text class="day-css flex" :class="{active:activeIndex === index}"
                      @click.stop="selceDay(item,index)" v-for="(item,index) in timeData"
                      :key="item.id">{{item.name}}</text>
                  </view>
                  <scroll-view class="scroll-view padding-left-sm padding-right-sm" scroll-x :scroll-with-animation="true">
                    <view class="text-con padding-top-sm padding-bottom-sm" v-if="!isLoading">
                      <view
                        class=" marright14 d_ib yyfwtime padding-bottom-xs  padding-left-xxs padding-right-xxs margin-right-xs" v-for="(item,index) in timeData[activeIndex].tiem"
                        @click.stop="selceTiem(item,index)" :key="index" > 
                        <view class="timestate" 
                          :class="{jing:item.status == 2 && timeIndex !== index,man:item.status ==3 && timeIndex !== index,timeActive:timeIndex == index}">
                          <view class="flex justify-center align-center flex-direction">
                            <text class="zhuangtai margin-top-xxs">{{item.title}}</text>
                            <text class="margin-top-xxs"
                              v-if="item.status">{{item.status == 1 ? '闲' : item.status == 2 ? '紧' : item.status == 4 ? '有' : item.status == 3 ?  '满' : ''}}</text>
                            <view class="uglbox" v-if="timeIndex == index">
                              <text class="cuIcon-check text-bold p_rlt"></text>
                            </view>
                          </view>
                        </view>
                        <view v-if="item.text" class="duosren">{{item.text}}</view>
                      </view>
                    </view>
                    <view class="ct-box flex align-center justify-between" v-else>
                      <text class="time-icbg"></text>
                      <text class="text-c6">时间计算中...</text>
                    </view>
                  </scroll-view>


                </view>
                <view class="tuikuan  padding-right-sm padding-top-sm" v-if="!flag">未准时履约，系统将自动取消，并退款</view>
              </view>
            </view>
           
            <!-- 选择预约时间end -->
            <view class="padding-top-sm padding-bottom-lg" style="height: 100%;">
              <!-- 备注、茶餐 -->
              <!-- <view class="flex justify-between align-center tea-h">
                  <view
                    class="diancan bzdc-w bg-white flex padding-left  padding-top  padding-bottom padding-left-lg  padding-right-lg"
                    :class="{'active': teaList.length > 0}" @click.stop="showPop('tea')">
                    <block v-if="teaList.length > 0">
                      <view class="flex flex-direction padding-top-sm">
                        <view class="text-c9">茶/餐</view>
                        <view class="flex ">
                          <view class="mt_itm flex text-sm" v-for="(item,index) in teaList" :key="index">
                            {{item}}
                            <text class="ckClose text-md cuIcon-close"></text>
                          </view>
                        </view>
                      </view>
                    </block>
                    <block v-else>
                      <view class="margin-right-sm p_rlt acdzbox">
                        <text class="acon-tea fzico p_rlt text-lg text-c6"></text>
                      </view>
                      <view class="flex flex-direction margin-left">
                        <text class="dc">我要点茶</text>
                        <text class="yxms margin-top-xs">优先准备好美食</text>
                      </view>
                    </block>
                  </view>
                  <view
                    class="diancan bzdc-w bg-white flex padding-left  padding-top  padding-bottom padding-left-lg  padding-right-lg"
                    :class="{'active': remarklist.length > 0}" @click.stop="showPop('remarks')">
                    <block v-if="remarklist.length > 0">
                      <view class="flex flex-direction padding-top-sm">
                        <view class="text-c9">茶/餐</view>
                        <view class="flex ">
                          <view class="mt_itm flex text-sm" v-for="(item,index) in remarklist" :key="index">
                            {{item}}
                            <text class="ckClose text-md cuIcon-close"></text>
                          </view>
                        </view>
                      </view>
                    </block>
                    <block v-else>
                      <view class="margin-right-sm p_rlt acdzbox">
                        <text class="acon-write fzico p_rlt text-lg text-c6"></text>
                      </view>
                      <view class="flex flex-direction margin-left" @click="tapShowRemarks">
                        <text class="dc">我要备注</text>
                        <text class="yxms margin-top-xs">说出你的喜好</text>
                      </view>
                    </block>
                  </view>
                </view> -->
              <!-- 付款方式 -->
              <view class="fkfs-con">
                <view class="fktitle text-c6 text-df">付款方式</view>

                <scroll-view class="scrollheight" :scroll-y="noScrBot" @click.stop="closeFn" :scroll-top="scrollTop"
                  @scroll="subscrAct">
                  <view class="fk-middle bg-white bg-shadou padding-sm">
                    <view class="zj-ul flex" v-for="(item,index) in paytype" :key="index" @click.stop="selcePay(item,paytype)" :class="{'align-center':!pricebelow.price}">
                      <view class="zj-left flex" >
                        <view>
                          <text class="text-xll margin-right-xs"
                            :class="item.select?'cuIcon-roundcheckfill':'cuIcon-round'"></text>
                        </view>
                      </view>
                      <view class="zj-right" style="flex: 1;">
                        <block v-if="pricebelow.price">
                          <view class="flex justify-between align-center">
                            <view class="padding-left-xs flex-sub">
                              <view class="flex align-end"
                                :class="{noCard:item.iska && item.id!==0,color56 : item.select}">
                                <text class="text-xs" v-if="item.id !== 2 && item.id !==3">￥</text>
                                <view class="text-xll">
                                  <text>{{item.id == 3 ? '好友代付' :  pricebelow.price}}</text>
                                </view>
                                <view class="manjians fkfs-manjian" v-if="item.id == 1">
                                  <text>-30元</text>
                                </view>
                                <text v-if="item.id == 2">次</text>
                              </view>
                              <view>
                                <text class="text-c3 text-df"
                                  :class="{noCard:item.iska && item.id!==0}">{{item.title}}</text>
                                <block v-if="item.id ">
                                  <text class="text-c3 text-df"
                                    :class="{noCard:item.iska && item.id!==0}">{{item.name}}</text>
                                  <text class="text-c9 text-xs margin-left-sm"
                                    :class="{noCard:item.iska && item.id!==0}">{{item.nameTips}}</text>
                                </block>
                              </view>
                            </view>
                            <block v-if="item.id!==0 && item.iska">
                              <view class="text-c9 text-df">暂未发现电子卡</view>
                              <view class="color9700 text-df margin-top-xs">去开卡立减30 <text class="lg  cuIcon-right"></text>
                              </view>
                            </block>
                            <block v-else>
                              <view v-if="item.id == 2" class="text-c6" @click.stop="showCard(item,carSet)">
                                {{moxibustion}}
                                <text class="lg  cuIcon-right rotateStyle" :class="{'active': item.show }"></text>
                              </view>
                              <view v-if="item.id ==1" @click.stop="showCard(item,cardlist)">
                                <view class="text-c6 text-df">
                                  {{ payData}}
                                  <text class="lg  cuIcon-right rotateStyle" :class="{'active': item.show }"></text>
                                </view>
                                <view class="color9700 text-sm margin-top-xs "
                                  @click.stop=" mnavTo('/pages/others/rechargeCard/rechargeCard')" v-if="!item.show">去充值
                                </view>
                              </view>
                              <view v-if="item.id ==3">
                                <text class="lg  cuIcon-right"></text>
                              </view>
                            </block>
                          </view>
                        </block>
                        <block v-else>
                           <view class="text-c3 text-df flex justify-between align-center padding-left-sm" style="height: 70rpx;" :class="{'noCard' : item.id !== 0}">
                             {{item.name}}
                           </view>
                        </block>
                        <!-- <uni-transition :show="item.show && item.id !== 0" :duration="400"
													mode-class="fade">
													<view
														class="cardlist flex padding-sm align-center margin-bottom-sm margin-top-sm"
														v-for="(citem,cindex) in item.taoka" :key="cindex"
														@click.stop="selceChildPay(citem,item,paytype)">
														<view class="cardleft">
															<text class="text-xll margin-right-xs text-c6"
																:class="citem.select && citem.available ? 'cuIcon-roundcheckfill':'cuIcon-round'"></text>
														</view>
														<view class="margin-left-sm text-c6"
															v-if="item.type == 'e-card'"
															:class="{color56:citem.select}">
															{{citem.carrnNumberL}}
														</view>
														<view class="margin-left-sm text-c6 " v-else
															:class="{color56:citem.select,available:!citem.available}">
															<text class="margin-right-lg">{{citem.carrnNumberL}}</text>
															{{citem.num}}/<text class="clod1da">{{citem.selemum}}</text>
														</view>
														<view
															class="margin-left-lg color9700 recharge padding-right-sm text-c6"
															v-if="citem.id == 1 && item.id == 1">去充值</view>
													</view>
													<view
														class="text-df text-c6 flex justify-center align-center padding-top-xs padding-bottom-xs"
														@click.stop="mnavTo('/pages/user/bindingCards/bindingCards')">
														<text
															class="text-xs text-gray cuIcon-add margin-right-xs"></text>我要绑卡
													</view>
												</uni-transition> -->
                      </view>
                    </view>
                  </view>

                </scroll-view>
              </view>
              <!-- <view
					  class="bg-white margin-top-sm padding-top padding-bottom-sm padding-left-sm padding-right-sm bg-shadou ">
					  <view class="flex justify-between">
					    <view><text>付款方式</text></view>
					    <view class="fukuan-li flex flex-direction align-center " style="position: relative;"
					      v-for="(item,index) in paytype" :class="{payActive:payIndex == index }" :key="index"
					      @click.stop="selcePay(item,index)">
					      <view class="shangmian flex justify-center align-center">
					        <text v-if="!item.taoka">¥</text>
					        <text :class="{fontmin:item.taoka}">{{item.monery}}</text>
					      </view>
					      <view class="wxxiamia  flex justify-center align-center" :class="{wxxiamiaAcrive:payIndex == index}">
					        {{item.name}}
					      </view>
					      <view class="manjians" v-if="payIndex == index">
					        <text>减120</text>
					      </view>
					      <view class="posi-icon flex" v-if="payIndex == index">
					        <text class="posi-check cuIcon-check text-bold "></text>
					      </view>
					    </view>
					  </view>
					  <view class="flex justify-end padding-top-sm">
					    <view class="wuka padding-right-lg">无卡 ，开卡绑定减120 <text class="cuIcon-right"></text> </view>
					    <view class="gmbd">购买绑定 <text class="cuIcon-right"></text></view>
					  </view>
					  <view v-if="false" class="isCard margin-top-sm padding-top-sm flex align-center justify-between">
					    <text class="kanumber text-lg text-c6">138***2271</text>
					    <text class="cuIcon-right text-c9 text-df"></text>
					  </view>
					</view> -->
            </view>
          </view>

        </view>
      </template>
    </slideContent>
    <!-- 底部 -->
    <!-- <view class="below-box flex justify-between padding-left">
      <view class="left-box flex justify-between">
        <view class="boxli lineposi flex justify-center align-center flex-direction padding-right">
          <text class="wdquan" @click="showPop('couponRef')">我的劵</text>
          <view class="wdquan kyomng"><text class="numzs lines-black text-bold">5 </text>张可用</view>
        </view>
        <view class="boxli flex justify-between margin-left">
          <view class="flex flex-direction  margin-right align-center">
            <text class="moneryff">¥1576</text>
            <text class="yhff">已含房费</text>
          </view>
          <view class="flex flex-direction">
            <text class="xxcj text-white bt_tips padding-left-sm">小程序价</text>
            <view class="youhui margin-top-xs">已优惠¥64 <text class="cuIcon-fold"></text> </view>
          </view>
        </view>
      </view>
      <view class="right-box flex justify-center align-center text-white">
        <text>提交</text>
      </view>
    </view> -->

    <!-- 左侧小按钮 -->
    <!-- <view class="leftbtn flex align-center  padding-left-lg" v-if="!flag">
      <view>
        <view class="renshu">3<text class="ren">人</text> </view>
        <view class="wddina margin-top-xs">我点的</view>
      </view>
      <view class="icon padding-left-sm"><text class="cuIcon-roundright text-df"></text></view>
    </view> -->
    <view class="below-mask" @click="modzShow" :class="{act:openKey}"></view>
    <view class="below-prop flex justify-between align-center">
      <view class="flex-sub bottom-li flex justify-start padding-left-sm align-center" @click.stop="showPop('shortUnitRef')">
        <uni-badge class="uni-badge-left-margin total" v-if="childCount" :offset="[-34,-15]" :text="childCount" absolute="rightTop"
          size="small"></uni-badge>
        儿童<text class="text-sm text-c9 cuIcon-right margin-left-xs "></text>
      </view>
      <view class="flex-sub bottom-li flex justify-center align-center" @click.stop="showPop('tea')">
        <uni-badge class="uni-badge-left-margin total" v-if="teaList" :offset="[-35,-16]" :text="teaList"
          absolute="rightTop" size="small"></uni-badge>
        茶餐<text class="text-sm text-c9 cuIcon-right margin-left-xs "></text>
      </view>
      <view class="flex-sub bottom-li flex justify-end padding-right-sm align-center text-c6"
        @click="showPop('remarks')">
        <uni-badge class="uni-badge-left-margin total" v-if="remarklist && remarklist.length" :offset="[-35,-16]"
          :text="remarklist.length" absolute="rightTop" size="small"></uni-badge>
        备注<text class=" text-sm text-c9 cuIcon-right  margin-left-xs "></text>
      </view>
    </view>
    <view class="below-box flex justify-between">
      <view class="ba_left flex flex-direction align-center justify-center text-c6" :animation="animationDataL"
        @click.stop="seleCoupon">
        <text class="acon-youhuiquan2"></text>
        <view class="text-sm margin-top-xs" style="position: relative;">
          我的劵
          <uni-badge class="uni-badge-left-margin total" :text="10" absolute="rightTop" :offset="[12, -40]"
            size="small">
          </uni-badge>
        </view>
      </view>
      <view class="ba_right point" :animation="animationData" @click="orderedFn">
        <view class="flex justify-between" style="width: 100%;height: 100%;">
          <view class="r-text flex align-center">
            <view class="boxli flex justify-between margin-left-sm align-center">
              <block v-if="!isPriceLoading">
                <view class="anmoer flex justify-center align-center margin-right-sm">
                  <text class="acon-anmo text-white"></text>
                  <uni-badge class="uni-badge-left-margin total" v-if="pricebelow.goodsNum"
                    :text="pricebelow.goodsNum" absolute="rightTop" :offset="[-2, -20]" size="small">
                  </uni-badge>
                </view>
                <view class="flex flex-direction  margin-right align-center">
                  <text class="moneryff">¥{{pricebelow.price}}</text>
                  <text class="yhff" v-if="pricebelow.price > 0">已含房费</text>
                </view>
              </block>
              <block v-else>
                <view class="icongif-bg"></view>
              </block>
              <view class="flex flex-direction" @click.stop="tapShowDisModel" v-if="pricebelow.discount && !isPriceLoading">
                <text class="xxcj text-white bt_tips padding-left-sm">小程序价</text>
                <view class="youhui margin-top-xs text-white">已优惠¥{{pricebelow.discount}} <text
                    class="lg  cuIcon-right rotateStyle" :class="{'active':rotate}"></text> </view>
              </view>
            </view>
          </view>
          <view class="r-btn text-white flex flex-direction justify-center align-center text-lg"
            :class="{active:!pricebelow.price}" @click.stop="mnavTo('/pages/order/orderComplete/orderComplete?type=' + typePay)">
            {{pricebelow.price ? '提交' : '请选项目'}}
            <text v-if="pricebelow.price" class="text-xs margin-top-xs ">有20:00开始的服务</text>
          </view>
        </view>
      </view>
    </view>
    <!-- <uni-load-more :status="addGood" iconType="circle"></uni-load-more> -->
    <!-- 购物车飞入 -->
    <view class="ballShow">
      <carShow ref="ballRef" :duration="400" :size="25" />
    </view>

    <!-- 点茶 -->
    <teaView ref="tea" @confirm="teaViewConfirm"></teaView>
    <!-- 备注 -->
    <remarksView ref="remarks" @confirm="remarksConfirm"></remarksView>
    <!-- 优惠券弹窗 -->
    <coupon ref="couponRef" type="menu" @change="changeCoupons"></coupon>
    <!-- 我的安排 -->
    <arrangeView ref="arrangeRef"></arrangeView>
    <!-- 结算 -->
    <carLiist ref="carListRef" @confirm="carConfirm" @maskClick="maskClick('carListRef')" :isPhonex="isPhonex">
    </carLiist>
    <!-- 优惠明细 -->
    <discount ref="discountRef" :isPhonex="isPhonex" @maskClick="maskClick('discountRef')" />
    <!-- 电子卡 -->
    <payTypeModal ref="payTyperef" @confirm="payConfirm"></payTypeModal>
    <!-- 安排儿童 -->
    <shortUnitView ref="shortUnitRef" @confirm="suvConfirm"></shortUnitView> 
    <!-- 点名 -->
    <namecallView ref="namecallRef" @confirm="namecallConfirm"></namecallView>
  </view>
</template>

<script lang="ts" setup>
  import { ref, watch, nextTick, computed,onMounted,onBeforeUnmount } from "vue";
  import { onShow, onHide, onLoad } from '@dcloudio/uni-app';
  import { mnavTo, showLoading, hideLoading, getCurRoute, getSystemPhoneX } from '@/utils/helper';
  import slideContent from '@/uni_modules/you-touchbox/components/you-touchbox/you-touchbox.vue' //拖动
  import tabs from '@/components/comtabs/comtabs.vue' //tab
  import numberKeyboard from '@/components/number-keyboard/number-keyboard.vue' //键盘
  import carShow from '@/uni_modules/lime-ball/components/l-ball/l-ball.vue' //飞入购物车
  import teaView from './orderTea.vue'  //点茶
  import remarksView from './remarks.vue' //备注
  import technicianView from './technician.vue' //选择技师
  import arrangeView from './arrangeDetails.vue' //我的安排
  import carLiist from "./carlist.vue"  //购物车
  import discount from "./discount.vue" //优惠明细
  import coupon from "./coupon.vue" //我的劵
  import payTypeModal from "@/components/selePay/selePay.vue" //我的卡
  import shortUnitView from "./shortUnit.vue" //安排儿童
  import namecallView from "./namecalling.vue" //点名
  
  const childCount = ref(0)
  const shortUnitRef = ref(null)
  const namecallRef = ref(null)
  const editTechnRef = ref(null)
  const addGood = ref(false)
  const payData = ref('138***2271(¥666.6)')
  const payTyperef = ref(null)
  const moxibustion = ref('艾灸套卡(剩余10次)')
  const remarklist = ref<any>()
  // const kaonumber = ref('138***2271(¥666.6)')
  const isPhonex = ref<any>(false)
  const isActBox = ref(false)
  const ballRef = ref()
  const allowSlide = ref(false)
  const couponRef = ref(null)
  const replaceUnitRef = ref(null)
  const arrangeRef = ref(null)
  const carListRef = ref() //购物车
  const noScrBot = ref(true)
  const isMoving = ref(false)
  const discountRef = ref()
  const show = ref(false)
  const scrollTop = ref(0);
  const subOldTop = ref(0);
  const flag = ref(false)
  const sildContRef = ref()
  const tabsRef = ref()
  const currentIndex = ref(0)
  const scrollLeft = ref(0) //初始位置
  const activeIndex = ref(0)
  const timeIndex = ref(-1)
  const imgliINdex = ref(-1) //选择技师
  const payIndex = ref(0)
  const beizhu = ref()
  const openKey = ref(false)
  const KeyboarHid = ref(null)
  const tea = ref(null)
  const remarks = ref(null)
  const technician = ref(null)
  const phoneValue = ref('')
  const isCard = ref(true) //是否有卡
  const showMj = ref(false)
  const slideTopOp = ref(1)
  const slideBot = ref(0)
  const slideMarg = ref(0)
  const sevProList = ref<any>([]) //项目列表
  // const pricebelow = ref<any>({
  //   price : 0,
  //   num:0,
  //   discount:0
  // })
  const paytype = ref<any>([
    {
      id: 0,
      name: '微信',
      nameTips: '小程序价',
      monery: 1658,
      select: true,
      type: 'wx',
      taoka: []
    },
    {
      id: 1,
      name: '电子卡',
      nameTips: '会员价',
      monery: 1576,
      select: false,
      num: 120,
      iska: false,
      show: false,
      type: 'e-card',
      taoka: [
        {
          id: 0,
          carrnNumberL: '138***2231(¥999.6)',
          balance: 1200,
          select: false,
          available: true, //是否可用
        },
        {
          id: 1,
          carrnNumberL: '138***8271(¥888.6)',
          balance: 50,
          select: false,
          available: true,
        },
        {
          id: 2,
          carrnNumberL: '135***2271(¥446.6)',
          balance: 1600,
          select: false,
          available: true,
        }
      ]
    },
    {
      id: 2,
      name: '套卡',
      monery: 10,
      balance: 10,
      select: false,
      iska: false,
      type: 'card-set',
      taoka: [
        {
          id: 0,
          carrnNumberL: '艾灸10次套卡',
          num: 10,
          selemum: 8,
          select: false,
          available: true,
        },
        {
          id: 1,
          carrnNumberL: '按摩15次套卡',
          num: 15,
          selemum: 10,
          select: false,
          available: true,
        },
        {
          id: 2,
          carrnNumberL: '足浴10次套卡',
          num: 15,
          selemum: 10,
          select: false,
          available: false,
        }
      ]
    },
    {
      id: 3,
      name: '好友代付',
      title:'找家人朋友完成付款'
    }
  ])
  const state = ref<any>({
    latitude: 28.208399,
    longitude: 113.06463,
    mapLatitude: 28.208399,
    mapLongitude: 113.06463,
    covers: [
      {
        id: 1,
        width: 50,
        height: 50,
        latitude: 28.20165877,
        longitude: 113.0320434,
        iconPath: "../../../static/map_ico02.png",
        contName: "马王堆店",
        text: '足浴按摩有房',
        customCallout: {
          anchorY: -10,
          anchorX: 25,
          display: 'BYCLICK',
        },
        // customCallout: {
        //   // content:"商家已接单",
        //   // fontSize:"32rpx",
        //   anchorX: 0,
        //   anchorY: 2,
        //   display: 'ALWAYS',
        // }
        // callout: {
        //   content: "四方坪店",
        //   display: 'ALWAYS',
        //   fontSize: "28rpx",
        //   padding: 10,
        //   borderRadius: 10,
        //   color: "#333",
        //   bgColor:"#FFFFDF",
        //   textAlign:'center',
        // }

      }, {
        id: 2,
        width: 40,
        height: 45,
        iconPath: "../../../static/map_ico02.png",
        latitude: 28.208399,
        longitude: 113.06463,
        contName: "隆平园店",
        text: '足浴按摩有房',
        customCallout: {
          anchorY: -10,
          anchorX: 25,
          display: 'BYCLICK',
        }
        // callout: {
        // 	content:"我",
        // 	display: 'ALWAYS',
        // 	fontSize:"32rpx",
        // 	padding:10,
        // 	borderRadius:10,
        // }
      },
      {
        id: 3,
        width: 40,
        height: 45,
        iconPath: "../../../static/map_ico02.png",
        latitude: 28.19159,
        longitude: 113.0737,
        contName: "中交广场店",
        text: '足浴按摩有房',
        customCallout: {
          anchorY: -10,
          anchorX: 25,
          display: 'BYCLICK',
        }
      }
    ],
    scale: 14, //地图层级，取值范围为5-18，默认16，14最优，11看长沙市
  })
  const jishuData = ref([
    {
      name: '足疗',
      img: 'https://cdn-static.yekjx.com/subscribe/images/sev_pro4.png',
      selce: false
    },
    {
      name: '推拿',
      img: 'https://cdn-static.yekjx.com/subscribe/images/sev_pro3.png',
      selce: false
    },
    {
      name: '足疗',
      img: 'https://cdn-static.yekjx.com/subscribe/images/sev_pro2.png',
      selce: false
    },
    {
      name: '推拿',
      img: 'https://cdn-static.yekjx.com/subscribe/images/sev_pro1.png',
      selce: false
    },
    {
      name: '足疗',
      img: 'https://cdn-static.yekjx.com/subscribe/images/sev_pro1.png',
      selce: false
    },
    {
      name: '推拿',
      img: 'https://cdn-static.yekjx.com/subscribe/images/sev_pro2.png',
      selce: false
    },
    {
      name: '足疗',
      img: 'https://cdn-static.yekjx.com/subscribe/images/sev_pro4.png',
      selce: false
    },
    {
      name: '小项目',
      img: 'https://cdn-static.yekjx.com/subscribe/images/sev_pro1.png',
      selce: false
    }
  ])
  const timeData = ref([
    {
      id: 0,
      name: '今天',
      tiem: [
        {
          title: '14:00',
          status: 4,//1 闲 2//紧张 3//满 //4有
          num: 0, //剩多少人
          text: '+¥5',
        },
        {
          title: '14:30',
          status: 4,//1 闲 2//紧张 3//满
          num: 0, //剩多少人
          text: '',
        },
        {
          title: '15:00',
          status: 2,//1 闲 2//紧张 3//满
          num: 2, //剩多少人
          text: '',
        },
        {
          title: '15:30',
          status: 2,//1 闲 2//紧张 3//满
          num: 0, //剩多少人
          text: '',
        },
        {
          title: '16:00',
          status: 3,//1 闲 2//紧张 3//满
          num: 0, //剩多少人
          text: '+¥5',
        },
        {
          title: '16:30',
          status: 3,//1 闲 2//紧张 3//满
          num: 0, //剩多少人
          text: '',
        },
        {
          title: '17:00',
          status: 4,//1 闲 2//紧张 3//满
          num: 0, //剩多少人
          text: '',
        },
        {
          title: '17:30',
          status: 3,//1 闲 2//紧张 3//满
          num: 0, //剩多少人
          text: '',
        },
        {
          title: '18:00',
          status: 4,//1 闲 2//紧张 3//满
          num: 0, //剩多少人
          text: '+¥5',
        },
        {
          title: '18:30',
          status: 4,//1 闲 2//紧张 3//满
          num: 2, //剩多少人
          text: '',
        }
      ]
    },
    {
      id: 1,
      name: '明天',
      tiem: [
        {
          title: '14:00',
          status: 4,//1 闲 2//紧张 3//满
          num: 0, //剩多少人
          text: '+¥5',
        },
        {
          title: '14:30',
          status: 4,//1 闲 2//紧张 3//满
          num: 0, //剩多少人
          text: '+¥5',
        },
        {
          title: '15:00',
          status: 3,//1 闲 2//紧张 3//满
          num: 1, //剩多少人
          text: '+¥5',
        },
        {
          title: '15:30',
          status: 3,//1 闲 2//紧张 3//满
          num: 2, //剩多少人
          text: '+¥5',
        },
        {
          title: '16:00',
          status: 2,//1 闲 2//紧张 3//满
          num: 0, //剩多少人
          text: '+¥5',
        },
        {
          title: '16:30',
          status: 2,//1 闲 2//紧张 3//满
          num: 2, //剩多少人
          text: '+¥5',
        }
      ]
    },
    {
      id: 2,
      name: '后天',
      tiem: [
        {
          title: '14:00',
          status: 4,//1 闲 2//紧张 3//满
          num: 0, //剩多少人
          text: '+¥5',
        },
        {
          title: '14:30',
          status: 3,//1 闲 2//紧张 3//满
          num: 0, //剩多少人
          text: '+¥5',
        },
        {
          title: '15:00',
          status: 2,//1 闲 2//紧张 3//满
          num: 2, //剩多少人
          text: '+¥5',
        },
        {
          title: '15:30',
          status: 4,//1 闲 2//紧张 3//满
          num: 0, //剩多少人
          text: '+¥5',
        },
        {
          title: '16:00',
          status: 4,//1 闲 2//紧张 3//满
          num: 0, //剩多少人
          text: '+¥5',
        },
        {
          title: '16:30',
          status: 4,//1 闲 2//紧张 3//满
          num: 0, //剩多少人
          text: '+¥5',
        }
      ]
    }
  ])
  const tablist = ref([
    {
      orderState: 'all',
      id: 0,
      name: "没有熟悉技师"
    }, {
      orderState: '142',
      id: 1,
      name: "有熟悉技师"
    }
  ])
  const cardlist = ref([
    {
      amount: '10.27',
      card_no: '60983226',
      is_default: '5',
      phone: '19158202779',
      status: '1',
      select: true,
      type: 'card'
    },
    {
      amount: '26270.17',
      card_no: '60983214',
      is_default: '6',
      phone: '19158202779',
      status: '1',
      select: false,
      type: 'card'
    },
    {
      amount: '26280.17',
      card_no: '60983214',
      is_default: '6',
      phone: '19158202779',
      status: '-1',
      select: false,
      type: 'card'
    }
  ])
  const carSet = ref([
    {
      max: '10',
      min: '8',
      card_no: '60983226',
      is_default: '5',
      taoka: '艾灸10次套卡',
      status: '1',
      select: true,
      type: 'cardSet'
    },
    {
      max: '10',
      min: '5',
      card_no: '60983214',
      is_default: '6',
      taoka: '艾灸20次套卡',
      status: '1',
      select: false,
      type: 'cardSet'
    },
    {
      max: '10',
      min: '5',
      card_no: '60983214',
      is_default: '6',
      taoka: '艾灸30次套卡',
      status: '-1',
      select: false,
      type: 'cardSet'
    }
  ])
  const back = () => {
      uni.navigateBack({
        delta: 1
      })
	}
  
  // const minTopH = ref(350)
  onShow(() => {
    slideTopOp.value = 1
    slideBot.value = 0
    slideMarg.value = 0
    // minTop.value = 130
  })
  onMounted(()=>{
    startCountdown();
   //   const systemInfo = uni.getSystemInfoSync();
     
   //   // 获取状态栏高度
   //   const statusBarHeight = systemInfo.statusBarHeight;
     
   //   // 获取导航栏高度
   //   const navigationBarHeight = systemInfo.navigationBarHeight;
   
   //   // 计算去除导航栏和状态栏后的实际可用屏幕高度
   //  minTopH.value = systemInfo.screenHeight - statusBarHeight - 650
   
  })
  onBeforeUnmount(() => {
    if (timer.value) {
      clearInterval(timer.value);
    }
  });
  //选择技师倒计时
  const remainingTime = ref(30); // 剩余时间
  const timer = ref(null); // 用于存储定时器的 ID
  const startCountdown = () => {
    timer.value = setInterval(() => {
      if (remainingTime.value > 0) {
        remainingTime.value -= 1;
      } else {
        clearInterval(timer.value);
      }
    }, 1000);
  }

  //确认优惠劵
  const couponSelects = ref<Record<string, any>>({})//代金券选中
  
  const isPriceLoading = ref(false)
  const pricebelow = computed(() => {
    let price = 0, goodsNum = 0, discount = 0
    if (addGood.value) {
      price = 1576,
      goodsNum = 1,
      discount = 64
    }

    const r = {
      price,
      goodsNum,
      discount
    }

    return r

  })
  const vipSelects = ref<Record<string, any>>({
    totalNum: 0,
    sList: [],
    canUse: false,
    totalMoney: 0,
    disVAmout: 0,
    allTotalMoney: 0,
    allowVipTotalPrice: 0
  })//资格券选中
  const changeCoupons = (e : any) => {
    let { curVCoupon, curCoupon } = e.value
    couponSelects.value = curCoupon || {};//已选券
    vipSelects.value = curVCoupon || {};//资格券
    carListRef.value.changeCoupons(e);
    console.log('changecurVCoupon00', e, curVCoupon)
    console.log('changeCoupons00', curCoupon)
  }

  //选择是否有熟悉的技师
  const tabSelect = (item : any, index : any) => {
    currentIndex.value = item.id
    if (index === 1) {
      closeTechnician()
      // imgliINdex.value = -1
      // technician.value.toggleslc(false)
    } else {
      openKey.value && (openKey.value = false);
    }
  }
  const typePay = ref(0)
  //付款方式
  const selcePay = (item : any, data : any) => {
    if(!pricebelow.value.price){
      return
    }
    typePay.value = item.id
    if (item.select) {
      // 如果当前项目已经被选中，则取消选中
      item.select = false;
    } else {
      // 否则，选中当前项目，取消其他项目的选中状态
      data.forEach((it) => {
        it.select = false;
      });
      item.select = true;  // 选中当前项
      if(item.id == 0){
       
      }else if(item.id == 3){
       mnavTo('/pages/order/orderComplete/orderComplete?type=fpa')
      }
      if (item.taoka && item.taoka.length > 0) {
        item.taoka[0].select = true;  // 设置第一个子项的 select 为 true
      }
    }

    console.log('付款方式', item.select);
  };

  const selceChildPay = (citem : any, item : any, data : any) => {
    if (citem.iska || !citem.available) return
    // payIndex.value = index
    item.taoka.forEach((sitem) => {
      sitem.select = false
    });
    data.forEach((sitem) => {
      sitem.select = false
    });
    item.select = true
    citem.select = true
    item.show = false
    // item.id == 1 ? kaonumber.value = citem.carrnNumberL : moxibustion.value = citem.carrnNumberL

    console.log('付款方式')
  }

  const curPop = ref('');//当前打开弹窗
  const rotate = ref(false)
  const showPop = (source : string, carlist ?: any) => {
    curPop.value = source;
    console.log('showPop', source)
    switch (source) {
      case 'tea':
        tea.value?.open()
        break;
      case 'shortUnitRef':
        shortUnitRef.value?.open()
        break;
      case 'namecallRef':
         namecallRef.value?.open()
         break;
      case 'editTechnRef':
         editTechnRef.value?.open()
         break;
      case 'payTyperef':
        payTyperef.value?.open(carlist)
        break;
      case 'remarks':
        remarks.value?.open()
        break;
      case 'couponRef':
        couponRef.value?.open()
        break;
      case 'discountRef':
        carAnimationBegin()
        hidePop('carListRef')
        rotate.value = true;
        showMj.value = false;

        discountRef.value?.open()
        break;
      case 'arrangeRef':
        arrangeRef.value?.open()
        break;
      case 'replaceUnitRef':
        replaceUnitRef.value?.open()
        break;
      case 'carListRef':
        carAnimationBegin()
        hidePop('discountRef')
        showMj.value = false
        carListRef.value?.open()
        break;
      default:
        break;
    }
  }
  const hidePop = (source : string, type : any = '') => {
    switch (source) {
      case ' tea':
        tea.value?.close()
        break;
      case 'shortUnitRef':
         shortUnitRef.value?.close()
         break;
      case 'namecallRef':
         namecallRef.value?.close()
         break;
      case 'editTechnRef':
         editTechnRef.value?.close()
         break;
      case ' payTyperef':
        payTyperef.value?.close()
        break;
      case 'remarks':
        remarks.value?.close()
        break;
      case 'couponRef':
        couponRef.value?.close()
        break;
      case 'arrangeRef':
        arrangeRef.value?.close()
        break;
      case 'replaceUnitRef':
        replaceUnitRef.value?.close()
        break;
      case 'discountRef':
        curPop.value && (curPop.value == 'carListRef' || curPop.value == 'discountRef') && type != '' ? carAnimationEnd() : ''
        rotate.value = false
        // curPop.value && curPop.value =='diskModelRef'? carAnimationEnd() : ''
        showMj.value = curPop.value == 'carListRef' ? false : true
        discountRef.value?.close()
        break;
      case 'carListRef':
        curPop.value && (curPop.value == 'discountRef' || curPop.value == 'carListRef') && type != '' ? carAnimationEnd() : ''
        showMj.value = curPop.value == 'discountRef' ? false : true
        carListRef.value?.close()
        break;
      default:
        break;
    }
    curPop.value && curPop.value == source ? curPop.value = '' : ''
  }

  //我的劵
  const seleCoupon = () => {
    showPop('couponRef');
  }

  // 我要备注
  const tapShowRemarks = () => {
    showPop('pop16');
  }
  //查看地图
  const storeName = ref('颐而康星沙店')
  const consultMap = () => {
    flag.value = true
    slideTopOp.value = 0
    slideBot.value = 1
    state.value.scale = 13 //地图层级
    slideMarg.value = -344
    noScrBot.value = false
    openKey.value = false //键盘套餐自定义遮罩
    sildContRef.value.setBottom('335')
    console.log('查看地图')
  }
  //地图查看门店
  const markertap = (e : any) => {
    state.value.covers.find(item => {
      if (item.id === e.markerId) {
        item.customCallout.display = 'ALWAYS'
        storeName.value = '颐而康' + item.contName
        console.log(item.customCallout.display)
      } else {
        item.customCallout.display = 'NONE'
      }
    })
    console.log(e)
  }
  //拖动部分
  const changeSlide = (e) => {
    noScrBot.value = !(e.curTop == e.minTop)
    isMoving.value = false
    // scrollTop.value = 0
    if (e.curTop > 160) {
      flag.value = true
    } else {
      flag.value = false
    }
    // console.log(e)
    // minTop: this.min,
    // maxTop: this.max,
    // curTop: this.top
    if (noScrBot.value) {
      slideTopOp.value = 1
      slideMarg.value = 0
      slideBot.value = 0
    } else {
      slideTopOp.value = 0
      slideMarg.value = -344
      slideBot.value = 1
    }
  }
  onShow(() => {
    // scrollTop.value = 0
  })
  onHide(() => {
    show.value = false
    addGood.value = false
    // if(!noScrBot.value){
    setTimeout(() => {
      scrollTop.value = 0
      // initTopH.value = '200'
      // maxTopH.value = '130'
      // minTopH.value = '335'
      // #ifdef MP-WEIXIN
        sildContRef.value.setBottom('0.9')
      // #endif
      // #ifdef H5
        sildContRef.value.setBottom('0.878')
      // #endif
      noScrBot.value = true
      flag.value = false
    }, 500)
    // }
  })
  const handleTouchEnd = () => {
    isMoving.value = false
  }
  const teaList = ref<any>()
  //点茶回调
  const teaViewConfirm = (e:any) => {
    teaList.value = e.statue
    console.log('点茶回调---------', e)
  }
  //备注回调
  const remarksConfirm = (e:any) => {
    remarklist.value = e.statue
    console.log('备注回调---------', e)
  }
  //安排儿童
  const suvConfirm = (e:any) => {
    childCount.value = e
  }
  //点名
  const namecallConfirm = () => {
    addGood.value = true
    console.log('点名')
  }
   
  //选择卡
  const payConfirm = (e) => {
    if (e.copiedItems[0].phone) {
      payData.value = formatCardNo(e.copiedItems[0].phone) + '￥' + '(' + e.copiedItems[0].amount + ')'
    } else {
      moxibustion.value = e.copiedItems[0].taoka + '(' + '剩余' + '(' + e.copiedItems[0].min + ')' + '次' + ')'
      // const moxibustion = ref('艾灸套卡(剩余10次)')
    }

    // console.log(payData.value,e.copiedItems[0].phone)
  }
  const formatCardNo = (cardNo) => {
    // 提取前三位和后四位，剩余部分用 *** 替换
    if (cardNo && cardNo.length >= 10) {
      return cardNo.slice(0, 3) + '***' + cardNo.slice(-4);
    }
    return cardNo; // 如果卡号不符合要求，返回原卡号
  };
  //购物车
  const carConfirm = (e) => {
    console.log('购物车---------', e)
  }
  //scroll-view
  const subscrAct = (e) => {
    subOldTop.value = e.detail.scrollTop
  }
  const moveDistance = ref(0)
  const slideAct = (e : any) => {
    subOldTop.value > 0 ? scrollTop.value = subOldTop.value : '';
    nextTick(() => {
      console.log('slideAct', scrollTop.value, noScrBot.value)
      scrollTop.value = 0;
      subOldTop.value = 0;
      moveDistance.value = e
      isMoving.value = true
      // if (noScrBot.value) {
      // } else {
      //   // isMoving.value=true

      // }
      // if(noScrBot.value){
      // 	isMoving.value=true
      // 	console.log("向下滑动")
      // }else{
      // 	isMoving.value=true
      // 	console.log("向上滑动")
      // }
      if (moveDiretion.value == 'down') {
        // console.log(scrollTop.value, '滑动距离')
        closeTechnician()
        // imgliINdex.value = -1 //选择技师弹窗关闭
        // technician.value.toggleslc(false)
        openKey.value = false //键盘关闭

        state.value.scale = 13 //地图层级
        slideTopOp.value = slideTopOp.value - 0.02
        slideBot.value = slideBot.value + 0.02
        if (slideMarg.value > -344) { //?有问题
          slideMarg.value = slideMarg.value - 5  //80-e  
        } else {
          flag.value = true
        }
      } else {
        state.value.scale = 14 //地图层级
        if (noScrBot.value) {
          slideTopOp.value = slideTopOp.value + 0.02
          slideBot.value = slideBot.value - 0.02
          if (slideMarg.value < 0) {
            slideMarg.value = slideMarg.value + 5 //80+e
          } else {
            flag.value = false
          }
        }
      }
    })

  }
  const closeFn = () => {
    if (show.value) {
      show.value = false
    }
  }
  // 加载状态 选择天
  const isLoading = ref(false); 
  
  //选择时间（天）
  const selceDay = (item : any, index : any) => {
    // 设置为加载状态
    isLoading.value = true;
     setTimeout(() => {
        activeIndex.value = index
        // 设置为非加载状态
        isLoading.value = false;
      }, 500);
  }
  //选择技师
  const trianglePosition = ref<any>([])

  const technicianEvent = ref<any>()
  const slidingoffset = ref()
  const subscrActImg = (e) => {
    slidingoffset.value = e.detail.scrollLeft
    console.log(e, '滑动距离', e.detail.scrollLeft)
  }

  const selceImgli = (item : any, index : any, e : any) => {
    const elementId = 'imgItem' + index;
    // technician.value.initLexH()
    jishuData.value.forEach(item => {
      item.selce = false
    })

    item.selce = true

    imgliINdex.value = index
    // calculateTrianglePosition()

    const cur = e.currentTarget
    let oflef = cur.offsetLeft
    const query = uni.createSelectorQuery();
    query.select(`.${elementId}`).boundingClientRect();
    query.exec((res) => {
      if (res[0]) {
        const imgw = res[0].width / 2;
        // 计算三角形的最终位置
        let wtriangle = oflef + uni.upx2px(49 - 10 - 14) + imgw;
        // 如果 slidingoffset.value 有值，则减去 slidingoffset.value
        if (slidingoffset.value) {
          wtriangle -= slidingoffset.value;
        }
        technicianEvent.value = parseFloat(wtriangle.toFixed(2));
        if (technicianEvent.value >= 384.13) {
          technicianEvent.value = 384.13
        } else if (technicianEvent.value <= 18.59) {
          technicianEvent.value = 18.59
        }
        console.log(`宽度: ${res[0].width}px, 高度: ${res[0].height}px`, imgw, scrollLeft.value, technicianEvent.value);
      }
    });


    technician.value.toggleslc(true)
    // technicianEvent.value =  e.changedTouches[0].clientX;
    console.log(e, '事件对象', technicianEvent.value)
  }
  //关闭所有打开的弹出层
  const closeAll = () => {
    closeTechnician()
    openKey.value = false
    const result = state.value.covers.some(item => item.customCallout.display === 'ALWAYS')
    if (result) {
      state.value.covers.forEach(item => {
        item.customCallout.display = 'NONE'
      })
    }
    console.log('关闭所有')
  }
  const closeTechnician = () => {
    technician.value.toggleslc(false)
    imgliINdex.value = -1
    jishuData.value.forEach(item => {
      item.selce = false
    })
  }
  //自定义遮罩点击
  const modzShow = () => {
    if (currentIndex.value === 0) {
      closeTechnician()
      // imgliINdex.value = -1
      // technician.value.toggleslc(false)
      // jishuData.value.forEach(item => {
      //   item.selce = false
      // })
      return
    } else {
      openKey.value = !openKey.value
    }
  }
  //选择时间段
  const selceTiem = (item : any, index : any) => {
    timeIndex.value = index
    console.log(timeIndex.value)
  }
  //键盘
  const keyBack = () => {
    openKey.value = false
  }
  //拨打门店电话
  const callPhone = (phone:any) => {
  	uni.makePhoneCall({ phoneNumber: phone })
  }
  const stopPrevent = (e) => { }
  //键盘清空键
  const onfinish = () => {
    if(phoneValue.value){
      showPop('namecallRef')
    }
    phoneValue.value ? openKey.value = false : '';
  }
  //键盘输入
  const onInput = (e) => {
    phoneValue.value = e
    console.log(e)
  }
  const expand = () => {
    openKey.value=!openKey.value
    console.log('expand---')
  }
  //选择技师弹窗 加入
  const technicianConfirm = (data : any,) => {
    if (!data.statue) {
      if (data.add) {
        isPriceLoading.value = true
        //随机为每个时间段生成 status 和 statusLabel
        timeData.value.forEach(item => {
          item.tiem.forEach(timeSlot => {
            // 直接生成 1 到 3 之间的随机数并更新状态
            timeSlot.status = getRandomStatus();
          })
        });
        ballRef.value.action(data.e, 'https://cdn-static.yekjx.com/yuyue/images/creat/cr_img01.png')
        
               
        setTimeout(()=>{
          addGood.value = true
          imgliINdex.value = -1
          technician.value.toggleslc(false)
          isPriceLoading.value = false
        },600)
         
      }else{
        
          imgliINdex.value = -1
          technician.value.toggleslc(false)
          jishuData.value.forEach(item => {
            item.selce = false
          })
      }
    }
  }
  const getRandomStatus = () => {
    return Math.floor(Math.random() * 3) + 1; // 生成 1 到 3 之间的整数
  }
  //选择付款方式
  const showCard = (item : any, cardlist : any) => {
    // item.show = !item.show
    paytype.value.forEach(item => {
      item.select = false
    })
    item.select = true
    showPop('payTyperef', cardlist)
  }

  const getEvent = (data : any) => {
    addGood.value = true
    ballRef.value.action(data.event.events, data.item.imgsrc)
    console.log(data, '----data')
  }



  //点击底部价格
  const tapShowDisModel = () => {
    curPop.value == 'discountRef' ? hidePop('discountRef', 'links') : showPop('discountRef')
    console.log(curPop.value, '我点的点击底部价格---------------------')
  }

  //1128我点的
  const orderedFn = () => {
    if (pricebelow.value.price) {
      curPop.value == 'carListRef' ? hidePop('carListRef', 'links') : showPop('carListRef')
    }
  }
  // 购物车弹窗关闭
  const maskClick = (source : string) => {
    switch (source) {
      case 'carListRef':
        carAnimationEnd()
        showMj.value = curPop.value == 'discountRef' ? false : true
        //购物车弹窗
        break;
      case 'discountRef':
        carAnimationEnd()
        rotate.value = false
        showMj.value = curPop.value == 'carListRef' ? false : true
        //价格明细弹窗
        break;
      default:
        break;
    }
    curPop.value ? curPop.value = '' : ''
    console.log('maskClick关闭', source, curPop.value)

  }
  //最右边parent盒子变化
  const caranimation = ref<any>()
  const animationData = ref({})
  //最左边盒子动画
  const caranimationL = ref<any>()
  const animationDataL = ref({})
  const initTopH = ref('141')
  const maxTopH = ref('80')
  const minTopH = ref('335')
  onLoad(() => {
    // #ifdef H5
    initTopH.value = '200'
    maxTopH.value = '130'
    // minTopH.value = '335'
    // #endif
    isPhonex.value = getSystemPhoneX();
    console.log(isPhonex.value, ' isPhonex.value-----------------')
    let caranimations = uni.createAnimation({
      duration: 500,
      timingFunction: 'ease',
    })
    let caranimationsx = uni.createAnimation({
      duration: 500,
      timingFunction: 'ease',
      transformOrigin: "right bottom"
    })
    let caranimationsL = uni.createAnimation({
      duration: 400,
      timingFunction: 'ease'
    })
    let animationsLef = uni.createAnimation({
      duration: 200,
      timingFunction: 'ease-out'
    })
    let animationsAllLef = uni.createAnimation({
      duration: 500,
      timingFunction: 'ease-in-out'
    })
    let animationsSearch = uni.createAnimation({
      duration: 400,
      timingFunction: 'ease-in'
    })
    caranimation.value = caranimations
    // caranimationx.value = caranimationsx
    caranimationL.value = caranimationsL
    // animationLef.value = animationsLef
    // animationAllbox.value = animationsAllLef
    // caranimationSearchL.value=animationsSearch
  })

  //底部提交
  const carAnimationBegin = () => {
    console.log('carAnimationBegin+开始')
    isActBox.value = true
    caranimation.value.width("750rpx").left(0).step()
    animationData.value = caranimation.value.export()
    // ---------------动画分割线
    // caranimationx.value.rotate(0).step()
    // animationDatax.value = caranimationx.value.export()

    //---------------------动画分割线
    caranimationL.value.opacity(0).step()
    animationDataL.value = caranimationL.value.export()
  }
  const carAnimationEnd = () => {
    console.log('carAnimationEnd+结束')
    isActBox.value = false
    caranimation.value.width("635rpx").left("120rpx").step()
    animationData.value = caranimation.value.export()
    caranimationL.value.opacity(1).step()
    animationDataL.value = caranimationL.value.export()
  }

  //监听地图往下滑  还是往上滑
  const moveDiretion = ref('down')
  watch(() => moveDistance.value, // 观察的源
    (newValue, oldVal) => {
      if (newValue > oldVal) {
        moveDiretion.value = 'down'
      } else {
        moveDiretion.value = 'up'
      }
    }
  );
</script>

<style lang="scss" scoped>
  .cuIcon-round {
    color: #999;
  }

  .cuIcon-roundcheckfill {
    color: #56BF7A;
  }

  .ballShow {
    width: 80rpx;
    height: 40rpx;
    position: absolute;
    bottom: 40rpx;
    left: 150rpx;
    // z-index: 999;
  }

  .top-menu {
    margin-bottom: 50rpx;
    .left-con {
      width: 200rpx;
      height: 94rpx;
      border-radius: 20rpx;
      background: #FFF;

      .wdd {
        color: #6EB1FB;
        display: block;
        width: 20px;
        height: 20px;
        border-radius: 35px;
        background: rgba(110, 177, 251, 0.22);
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .right-con {
      border-radius: 20rpx;
    }
  }

  .leftbtn {
    width: 180rpx;
    height: 140rpx;
    border-radius: 0px 80rpx 80rpx 0px;
    background: #FFF;
    box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.08);
    position: fixed;
    left: 0;
    bottom: 10%;
    z-index: 101;

    .renshu {
      color: #FF9307;
      font-size: 36rpx;
      font-weight: 700;
      letter-spacing: -0.25px;

      .ren {
        font-size: 20rpx;
        font-weight: 400;
      }
    }

    .wddina {
      font-size: 24rpx;
      font-weight: 400;
      letter-spacing: 0.24px;
    }
  }

  .posi-icon {
    position: absolute;
    top: 0;
    left: -1px;
    width: 30rpx;
    height: 26rpx;
    padding-left: 5rpx;
    border-radius: 6px 0px 4px 0px;
    background: rgba(86, 191, 122, 0.20);

    .cuIcon-check {
      color: #56BF7A !important;
      font-size: 20rpx !important;
      display: block;
    }
  }

  .map-box {
    width: 100%;
    transition: all .3s linear;
    height: 100vh;
    position: relative;
  }

  .height {
    height: 100vh;
  }


  .bgShadou {
    width: 100%;
    position: absolute;
    /* 绝对定位 */
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    /* 半透明黑色阴影 */
    box-shadow: 0 -10px 15px rgba(0, 0, 0, 0.5);
    /* 创建阴影效果 */
    z-index: 1;
    /* 确保阴影盖在上面 */
    opacity: 1;
    transition: all .3s linear;

    &.active {
      opacity: 0;
      transition: all .3s linear;
      z-index: 0;
    }
  }

  .bgMap {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .top-box {
    /* #ifdef MP-WEIXIN */
    position: fixed;
    /* #endif */
    /* #ifdef H5 */
    position: absolute;
    /* #endif */
    left: 0;
    top: 20rpx;
    /* #ifdef H5 */
    top: 40rpx;
    /* #endif */
    z-index: 22;
    width: 100%;
    .call-phone{
      width: 60rpx;
      height: 60rpx;
      border-radius: 20rpx;
      background: #FFF;
      box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.08);
      color: #56BF7A;
      margin-left: -150rpx;
    }
    .top-chikdw {
      border-radius: 8px;
      background: #FFF;
      box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.08);
      width: 322rpx;
      height: 60rpx;
      padding: 0rpx 14rpx;
    }

    .msyuan {
      width: 40rpx;
      height: 40rpx;
      border-radius: 50%;
      background: rgba(86, 191, 122, 0.20);
    }

    .text-style {
      color: #333;
      text-align: center;
      font-size: 28rpx;
      font-weight: 400;
      letter-spacing: 0.28px;
    }

    .cuIcon-roundright {
      font-size: 34rpx;
    }

    .lower-w {
      color: #FFF;
      text-align: center;
      font-size: 24rpx;
      font-weight: 400;
      z-index: 22;
      letter-spacing: 0.24px;

      .cuIcon-right {
        color: #fff;
      }
    }
  }

  .bg-shadou {
    border-radius: 20rpx;
    box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.08);
    position: relative;
    transition: all 5s ease;
  }
  .maiTopNegative{
    margin-top: -10rpx;
  }
  .fwsjtitle {
    height: 66rpx;
    &.active {
      background-color: #56BF7A;
      border-radius: 20rpx 20rpx 0 0;
    }
  }

  .gmbd,
  .wuka {
    color: #FF9700;
    font-size: 20rpx;
    font-weight: 400;
    letter-spacing: 0.2px;

    .cuIcon-right {
      font-size: 18rpx;
    }
  }

  .isCard {
    padding-left: 150rpx;
    border-top: 1px solid #F3F3FF;

    .kanumber {}
  }

  .middle-con {
    .dibu-con {
      border-radius: 4px;
      background: rgba(86, 191, 122, 0.05);
    }

    .fontmin {
      font-size: 28rpx;
    }

    .fukuan-li {
      height: 112rpx;
      width: 164rpx;
      border-radius: 8rpx;
      border: 0.5px solid rgba(153, 153, 153, 0.30);

      .wxxiamia,
      .shangmian {
        border-radius: 2px 0px 0px 0px;
        width: 100%;
        height: 100%;
      }

      .shangmian {
        font-size: 40rpx;
        font-weight: 400;
        letter-spacing: -0.25px;
      }

      .wxxiamia {
        background: rgba(153, 153, 153, 0.05);
        font-size: 28rpx;
        color: #666;
      }

      .wxxiamiaAcrive {
        color: #56BF7A;
      }
    }

    .tea-h {
      min-height: 184rpx;
    }

    .diancan {
      &.active {
        padding: 0 0 20rpx 6rpx;
      }
    }

    .bzdc-w {
      width: 326rpx;
      border-radius: 16rpx;
      background: #FFF;
      box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.08);

      .acdzbox {
        position: relative;

        &:before {
          content: '';
          position: absolute;
          left: -6rpx;
          top: 27rpx;
          width: 46rpx;
          height: 14rpx;
          background: linear-gradient(180deg, #B0FFE5 0%, #1BD39A 100%);
          opacity: 0.5;
          z-index: 1;
          border-radius: 100%;
          background-image: linear-gradient(rgb(176, 255, 229) 0%, rgb(27, 211, 154) 100%);
          background-position-x: initial;
          background-position-y: initial;
          background-size: initial;
          background-repeat-x: initial;
          background-repeat-y: initial;
          background-attachment: initial;
          background-origin: initial;
          background-clip: initial;
          background-color: initial;
          border-top-left-radius: 100%;
          border-top-right-radius: 100%;
          border-bottom-right-radius: 100%;
          border-bottom-left-radius: 100%;
        }
      }

      .dc {
        font-size: 32rpx;
        font-weight: 400;
        letter-spacing: 0.32px;
      }

      .yxms {
        color: #999;
        font-size: 24rpx;
        font-weight: 400;
        letter-spacing: 0.24px;
      }
    }

    .zsm-box {
      min-height: calc(100vh - 310rpx);
      width: 690rpx;
      padding-bottom: 300rpx;
      // margin: 0 auto;
      position: relative;

      .title-con {
        border-radius: 0px 0px 8rpx 8rpx;
        background: rgba(86, 191, 122, 0.05);
        height: 60rpx;
        line-height: 60rpx;

        .day-css {
          width: 136rpx;
          color: #999;
          font-size: 28rpx;
          font-weight: 400;
          letter-spacing: 0.28px;
          position: relative;

          &:not(:last-child):before {
            content: '';
            position: absolute;
            right: 30%;
            width: 2rpx;
            height: 20rpx;
            background: rgba(86, 191, 122, 0.15);
            top: 50%;
            transform: translateY(-50%);
          }
        }

        .active {
          color: #56BF7A;
          font-weight: 700;
        }
      }

      .text-con {
        .timestate {
          width: 90rpx;
          height: 82rpx;
          color: #56BF7A;
          font-size: 28rpx;
          font-weight: 400;
          letter-spacing: 0.28px;
          position: relative;
          overflow: hidden;

          .marright14 {
            margin-right: 14rpx;
          }



          .zhuangtai {
            font-size: 28rpx;
            font-weight: 400;
            letter-spacing: 0.28px;
          }

          .posiYuan {
            width: 60rpx;
            height: 60rpx;
            background-color: #BEEACD;
            border-radius: 50%;
            position: absolute;
            right: 0;
            bottom: 0;
            transform: translate(50%, 50%);
            opacity: 0;
          }
        }

        .timeActive {
          border-radius: 20rpx;
          background: #56BF7A;
          color: #fff !important;
        }

        .jing {
          color: #FF9700 !important;
        }

        .man {
          color: #D4D4D4 !important;
        }
      }
      .ct-box{
        height: 138rpx;
        text-align: center;
        width: 220rpx;
        margin: 0 auto;
        .text-c6{
          letter-spacing: 0.28px;
          font-weight: 400;
        }
        .time-icbg{
          width:44rpx;
          height: 44rpx;
          background: url('../../../static/1.gif') no-repeat;
        }
      }
      .yytime {
        color: #333;
        font-size: 32rpx;
        font-weight: 700;
        letter-spacing: 0.32px;

        .fwshij {
          &.active {
            color: #fff;
            // padding-bottom: 20rpx;
          }
        }
      }

      .yymiao {
        color: #56BF7A;
        font-size: 24rpx;
        font-weight: 400;
        border-radius: 38px;
        background: rgba(86, 191, 122, 0.05);
        width: 50rpx;
        height: 50rpx;
      }

      .tuikuan {
        color: #999;
        font-size: 20rpx;
        font-weight: 400;
        letter-spacing: 0.2px;
        color: #FF9700;
      }
    }

    .above-box {
      z-index: 2;
      position: relative;
      height: 331rpx;
    }

    .above {
      border-radius: 16rpx;
      background: #56BF7A;
      opacity: 1;
      transition: all .4s ease-in;
      position: relative;
      z-index: 999;

      &.active {
        opacity: 0;
        transition: all .4s ease-in;
        display: none;
      }
    }
  }

  .below-prop {
    width: 750rpx;
    height: 70rpx;
    background: #FFF;
    // box-shadow: 0px -5px 18px 0px rgba(0, 0, 0, 0.05);
    // box-shadow: 0px -12px 8.9px 0px rgba(0, 0, 0, 0.10);
    position: fixed;
    bottom: 108rpx;
    z-index: 998;

    .bottom-li {
      position: relative;
      height: 100%;
    }
  }

  .below-box {
    width: 750rpx;
    height: 108rpx;
    flex-shrink: 0;
    background: #FFF;
    box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    // padding: 0 40rpx;
    position: fixed;
    bottom: 0;
    z-index: 998;

    // .xxcj {
    //   font-size: 16rpx;
    //   font-weight: 400;
    //   background-color: #999;
    //   border-radius: 60rpx;
    //   width: 100rpx;
    //   padding: 5rpx 0;
    //   text-align: center;
    // }
    .ba_left {
      width: 120rpx;
      height: 100%;
      position: relative;
      z-index: -1;

      .acon-youhuiquan2 {
        font-size: 45rpx;
      }
    }

    .ba_right {
      flex: 1;
      background-color: #222;
      height: 100%;
      transition: all .3s ease-in;
      position: absolute;
      left: 120rpx;
      width: 635rpx;

      .r-text {
        height: 100%;
        .icongif-bg{
          /* #ifdef MP-WEIXIN */
          margin-top: 30rpx;
          /* #endif */
          width: 44rpx;
          height: 44rpx;
          display: block;
          background: url('../../../static/2-1.gif') no-repeat;
        }
      }

      &.active {
        width: 100%;
        transition: all .3s ease-in;
        position: relative;
        z-index: 100;
      }
    }

    .r-btn {
      width: 192rpx;
      height: 100%;
      background: #53A87F;

      &.active {
        background-color: #999;
      }
    }

    .anmoer {
      width: 75rpx;
      height: 75rpx;
      border: 4px solid #2c4134;
      border-radius: 50%;

      .acon-anmo {
        font-size: 60rpx;
      }
    }

    .bt_tips {
      width: 85rpx;
      height: 20rpx;
      font-size: 14rpx;
      padding-left: 20rpx;
      background: url('~@/static/lxp_ice.png') no-repeat center/contain;
      line-height: 21rpx;
      border-radius: 20rpx;
      // background: #999;
    }

    .youhui {
      // color: #666;
      // color: rgba(255, 255, 255, 0.60);
      font-size: 20rpx;
      font-weight: 400;
      letter-spacing: 0.2px;
    }

    .moneryff {
      font-size: 40rpx;
      font-weight: 700;
      // color: #FF6D6D;
      color: #fff;
    }

    .yhff {
      font-size: 20rpx;
      font-weight: 400;
      letter-spacing: 0.2px;
      // color: #666;
      color: rgba(255, 255, 255, 0.60);
      ;
    }

    .wdquan {
      color: rgba(153, 153, 153, 0.70);
      font-size: 28rpx;
      font-weight: 400;
      letter-spacing: 0.28px;
    }

    .right-box {
      height: 108rpx;
      width: 190rpx;
      background: #53A87F;
      font-size: 32rpx;
    }

    .lineposi {
      position: relative;

      &::after {
        content: '';
        width: 2rpx;
        height: 120rpx;
        // opacity: 0.2;
        // background: linear-gradient(90deg, #FFF 0%, #313131 47.9%, #FFF 100%);
        position: absolute;
        opacity: 0.5;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(133, 133, 133, 0.46) 46.5%, rgba(0, 0, 0, 0.00) 88.58%);
        right: 0;
        top: 60%;
        transform: translateY(-50%);
        z-index: 222;
      }
    }

    .numzs {
      font-size: 24rpx;
    }
  }

  .center-con {
    border-radius: 16rpx;
    background: #FFF;
    box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.08);

    .text-right {
      color: #999;
    }
  }

  .scroll-view {
    white-space: nowrap;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* 隐藏滚动条 for Firefox */
    -ms-overflow-style: none;

    /* 隐藏滚动条 for Internet Explorer and Edge */
    &::-webkit-scrollbar {
      display: none;
      /* 隐藏滚动条 for Chrome, Safari, and Opera */
    }

    .img-li {
      position: relative;
      margin-right: 20rpx;

      .imgstyle {
        width: 114rpx;
        height: 114rpx;
        position: relative;

        .img {
          width: 114rpx;
          height: 114rpx;
          border: 1px solid transparent;
          border-radius: 12rpx;

          &.imgliactive {
            border: 1px solid #56BF7A;
          }
        }
      }

      .textstyle {
        font-size: 32rpx;
        letter-spacing: 0.32px;
      }
    }

  }

  .payActive {
    border: 1px solid #56BF7A !important;
    color: #56BF7A !important;
  }

  .mtips {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    min-width: 52rpx;
    padding: 0 5rpx;
    line-height: 25rpx;
    border-radius: 0 12rpx 0 12rpx;
    background: rgba(255, 151, 0, 0.8);
  }

  .dianBox {
    .search {
      width: 100%;
      height: 96rpx;
      border: 1px solid #56bf7a;
      box-sizing: border-box;
      box-shadow: 0px 2px 18px rgba(0, 0, 0, 0.08);
      border-radius: 96rpx;
    }
    .cu-bar{
      position: relative;
    }
    .seachIco {
      margin: 0;
      padding: 0 0.8em 0 0.5em;
      font-size: 32rpx;
      color: #56bf7a;
    }

    .phico {
      font-size: 32rpx;
      margin-left: 0 !important;
    }

    .search-form {
      width: 100%;
      background-color: #fff;
      
      .seinput {
        font-size: 28rpx;
      }
    }
  }

  .jxtj {
    color: #56BF7A;
    font-size: 28r;
    font-weight: 400;
    letter-spacing: 0.28px;
  }

  .numkeyBox {
    position: absolute;
    width: 100%;
    height: 0;
    background: #FAFAFA;
    left: 0rpx;
    top: 120rpx;
    z-index: 9;
    overflow: hidden;

    &.show {
      height: 452rpx;
      transition: height 0.1s ease-out;
    }
  }

  .placeholderstyle {
    color: #999;
    font-size: 28rpx;
    font-weight: 400;
    letter-spacing: 0.28px;
  }

  .uglbox {
    position: absolute;
    right: -28rpx;
    bottom: -30rpx;
    width: 58rpx;
    height: 58rpx;
    font-size: 22rpx;
    overflow: hidden;
    color: #fff;
    border-radius: 50%;
    z-index: 1;
    padding-top: 5rpx;
    background-color: #BEEACD;
    ;

    .cuIcon-check {
      position: relative;
      left: 8rpx;
      bottom: 5rpx;
      z-index: 3;
      font-size: 20rpx;
      color: #56BF7A;
    }
  }

  .padding-b0 {
    padding-bottom: 0 !important;
  }

  .padding-t0 {
    padding-top: 0 !important;
  }

  .color56 {
    color: #56BF7A;
  }

  .color9700 {
    color: #FF9700;
  }

  .fkfs-con {
    .fktitle {
      padding: 0 0 20rpx 0;
    }

    .fk-middle {
      .zj-ul {
        padding-top: 20rpx;
        border-bottom: 1px solid #F5F5FD;
        padding-bottom: 20rpx;
        &:last-child{
          border-bottom: none;
        }
      }

      .cardlist {
        border-radius: 16px;
        background: rgba(241, 245, 253, 0.40);

        .available {
          color: #D1D1D1 !important;
        }
      }

      .recharge {
        flex: 1;
        text-align: right;
      }

    }
  }

  // .manjians {
  //   border-radius: 100rpx 60rpx 60rpx 0px;
  //   border: 0.5px solid #56BF7A;
  //   background: #56BF7A;
  //   color: #fff;
  //   position: absolute;
  //   top: 0;
  //   left: 80rpx;
  //   font-size: 20rpx;
  //   transform: translateY(-90%);
  //   padding: 0 10rpx;
  // }

  .fkfs-manjian {
    border-radius: 60px 60rpx 60rpx 0px;
    background: #FF9700;
    box-shadow: 0px 3px 18px 0px rgba(0, 0, 0, 0.14);
    width: 70rpx;
    color: #fff;
    padding-left: 10rpx;
    height: 28rpx;
    border: 0.5px solid #FF9700;
    // position: absolute;
    // top: 10rpx;
    // left: 125rpx;
    font-size: 20rpx;
    margin-bottom: 13rpx;
    margin-left: 10rpx;
  }
  .slideBg {
    width: 100%;
    background-color: #fafafa;
    position: absolute;
    bottom: 0;
    left: 0;
  }

  .scrollheight {
    // height: 820rpx;//820rpx
    height: calc(100vh - 1060rpx); //820rpx
    /* #ifdef H5 */
    height: calc(100vh - 1180rpx); //820rpx
    /* #endif */
  }

  .rotateStyle {
    transform: rotate(90deg);
    display: inline-block;
    transition: all .3s linear;

    &.active {
      transform: rotate(-90deg);
      transition: all .3s linear;
    }
  }

  .clod1da {
    color: #d1d1d1;
  }

  .mt_itm {
    line-height: 49rpx;
    height: 48rpx;
    min-width: 129rpx;
    background: rgba(123, 123, 123, 0.08);
    border-radius: 8rpx;
    padding-left: 10rpx;
    margin: 12rpx 10rpx 0 0;
  }

  .customCallout {
    font-size: 28rpx;
    color: #333;
    height: 100rpx;
    width: 190rpx;
    border-radius: 20rpx;
    background: #FFFFDF;
    padding: 10rpx 20rpx 20rpx;

    .callNames {
      // min-width: 150rpx;
      // max-width: fit-content !important;
      // height: 80rpx;
      // background: #FFF;
      // border-radius: 80rpx;
      // padding:20rpx;
      // padding: 0 20rpx;
      // line-height: 81rpx;
      // text-align: center;
      // display: flex;
      // justify-content: center;
      // box-shadow: 0px 10rpx 10px 0px rgba(34, 43, 69, 0.15);
      // white-space: nowrap;
    }

    .coverImgs {
      position: absolute;
      bottom: -20rpx;
      width: 0;
      height: 0;
      border-left: 25rpx solid transparent;
      /* 三角形的左边 */
      border-right: 25rpx solid transparent;
      /* 三角形的右边 */
      border-top: 25rpx solid #FFFFDF;
    }
  }

  .img-triangle {
    position: absolute;
    bottom: -75rpx;
    /* 将三角形放在上方 */
    left: 50%;
    transform: translateX(-50%);
    /* 三角形的水平位置，可以根据需要调整 */
    width: 0;
    height: 0;
    border-left: 25rpx solid transparent;
    /* 三角形的左边 */
    border-right: 25rpx solid transparent;
    /* 三角形的右边 */
    border-bottom: 25rpx solid #E4FEEE;
    /* 三角形的颜色 */
  }

  .modz {
    width: 100%;
    position: fixed;
    left: 0;
    // height: calc(100% - 262rpx);
    // height: 70vh;
    top: 0;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    // box-shadow: 0 -10px 15px rgba(0, 0, 0, 0.5);
    z-index: 999;


    opacity: 0;
    transition: all 0.5s linear;
    visibility: hidden;
    transition: opacity 0.5s linear, visibility 0s 0s;
    display: block;

    &.act {
      opacity: 1;
      visibility: visible;
      transition: opacity 0.5s linear, visibility 0s 0s;

    }
  }

  .modz-min {
    width: 100vw;
    position: absolute;
    left: -29rpx;
    // height: calc(100% - 262rpx);
    // height: 70vh;
    top: 230rpx;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    // box-shadow: 0 -10px 15px rgba(0, 0, 0, 0.5);
    z-index: 1;
    opacity: 0;
    transition: all 0.5s linear;
    display: none;

    &.act {
      display: block;
      opacity: 1;
      transition: all 0.5s linear;
    }
  }

  .below-mask {
    width: 100%;
    position: fixed;
    bottom: 0;
    height: 177rpx;
    /* #ifdef H5 */
    height: 5.56rem;
    /* #endif */
    background: rgba(0, 0, 0, 0.3);
    z-index: 9999;
    opacity: 1;
    transition: all 0.3s linear;
    display: none;

    &.act {
      display: block;
    }
  }

  .duosren {
    width: 50rpx;
    height: 20rpx;
    font-size: 16rpx;
    border-radius: 50px 30px 30px 0px;
    border: 0.5px solid #FF6D6D;
    background: #FF6D6D;
    color: #fff;
    position: absolute;
    right: 0rpx;
    top: 20rpx;
    transform: translateY(-100%);
    text-align: center;
  }
  .noCard {
    color: #CFCFCF !important;
  }
  .yyfwtime{
    position: relative;
    padding-top: 10rpx;
  }
</style>